<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Complex Toolbar on Dialog - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Complex Toolbar on Dialog</h2>
	<p>This sample shows how to create complex toolbar on dialog.</p>
	<div style="margin:20px 0;">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
	</div>
	<div id="dlg" class="easyui-dialog" title="Complex Toolbar on Dialog" style="width:400px;height:300px;padding:10px"
			data-options="
				iconCls: 'icon-save',
				closed:'true',
				buttons: '#dlg-buttons'
			">
		<form id="dlg-form">
			<!-- <input type="hidden" name="id"> -->
		<div id="dlg-toolbar" style="padding:2px 0">
			<table cellpadding="0" cellspacing="0" style="width:100%">
				<tr>
					<td style="padding-left:2px">
						<p>Help</p>
					</td>
					<td style="text-align:right;padding-right:2px">
						<input name="data1" style="width:150px"></input>
					</td>
				</tr>
				<tr>
					<td style="padding-left:2px">
						<p>Help</p>
					</td>
					<td style="text-align:right;padding-right:2px">
						<input name="data2" style="width:150px"></input>
					</td>
				</tr>
				<tr>
					<td style="padding-left:2px">
						<p>Help</p>
					</td>
					<td style="text-align:right;padding-right:2px">
						<input name="data3" style="width:150px"></input>
					</td>
				</tr>
				<tr>
					<td style="padding-left:2px">
						<p>Help</p>
					</td>
					<td style="text-align:right;padding-right:2px">
						<input name="data4" style="width:150px"></input>
					</td>
				</tr>
			</table>
			<input type="checkbox" name="check" value="check1"/> check1  
      <input type="checkbox" name="check" value="check2" checked="checked"/> check2  
      <input type="radio" name="radio" value="radio1" checked="checked"/> radio1  
      <input type="radio" name="radio" value="radio2"/> radio2 
		</div>
		</form>
	</div>
	
	<div id="dlg-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="save()">Save</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">Close</a>
	</div>

	<script type="text/javascript">
		function save() {
			alert($('form').serialize());

			alert(JSON.stringify($("#dlg-form").serializeObject()));

			alert(JSON.stringify($("#dlg-form").serializeArray()));

			var o = $("#dlg-form").serializeObject();
			o['id'] = 'test';
			alert(JSON.stringify(o));
		}

		$.fn.serializeObject = function()  
{  
   var o = {};  
   var a = this.serializeArray();  
   $.each(a, function() {  
       if (o[this.name]) {  
           if (!o[this.name].push) {  
               o[this.name] = [o[this.name]];  
           }  
           o[this.name].push(this.value || '');  
       } else {  
           o[this.name] = this.value || '';  
       }  
   });  
   return o;  
};  
	</script>

</body>
</html>